<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
<script src="http://how2j.cn/study/vue.min.js"/></script>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>

<style>
  #mianban{
      width: 1000px;
      margin: 0 auto;
  }


</style>


</head>
<body>
    <div class="panel panel-default" id="mianban">
        <div class="panel-heading">创建表</div>
        <div class="panel-body">
           <p>表名</p>
           <input type="text" class="form-control" style="width: 200px;" id="tablename">
           <br>
          
           <table class="table table-hover" >
            <thead>
               <th>字段名</th>
               <th>字段类型</th>
               <th>是否默认为空</th>
            </thead>
            <tbody>
               <tr v-for="ziduan in zidata">
                  <td>{{ziduan.ziduanname}}</td>  
                  <td>{{ziduan.ziduantype}}</td>  
                  <td>{{ziduan.notn}}</td>
               </tr>

            </tbody>
          </table>
         
        <br>
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
            添加字段
           </button>
    
           <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
           <div class="modal-dialog">
                   <div class="modal-content">
                     <div class="modal-header">
                       <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                       <h4 class="modal-title">添加字段</h4>
                     </div>
                     <div class="modal-body">
                       <p>字段名:</p>
                       <input type="text" class="form-control" id="ziname">
                       <br>
                       <p>字段类型:</p>
                       <select class="form-control" id="zitype">
                        <option>VARCHAR(45)</option>
                        <option>INT</option>
                        <option>DOUBLE</option>
                       </select>
                       <br>
                       <p >NOT NULL?:</p>
                       <p style="display:inline">是：</p>
                       <input type="radio" id="notn" name="active" value="NOT NULL" style="display:inline">
                       <p style="display:inline">否:</p>
                       <input type="radio" id="notn" name="active" checked="checked" value="DEFAULT NULL" style="display:inline">
                     </div>
                     <div class="modal-footer">
                       <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
                       <button class="btn btn-primary" type="button" id="tj" data-dismiss="modal" >提交</button>
                     </div>
                   </div><!-- /.modal-content -->
                 </div><!-- /.modal-dialog -->
           </div>
           
           <div style="height:200px"></div>
        </div>

        <button type="button" class="btn btn-success" onclick="tj()" >确认生成数据表</button>
      </div>
<input id="PageContext" type="hidden" value="${pageContext.request.contextPath}" />

<form id="userForm" action="" method="post">
    <input id="userFormJson" name="userFormJson" type="hidden"/>
  </form>

</body>
<script>
var ziduandata=[];

$(function(){
   $("#tj").click(function(){
    
     var tempn=$("#ziname").val();
     var tempt=$("#zitype").val();
     var tempnot=$("#notn").val();
     console.log(tempn);
     console.log(tempt);
     var tempjson={ziduanname:tempn,ziduantype:tempt,notn:tempnot};//构造json数据
     ziduandata.push(tempjson);//压入数组
     


   });

})


new Vue({
    el:"table",
    data:{
      zidata:ziduandata
    }
    })

var username=${Users.username};
var uid=${Users.id};
//数据json化
function tj(){
	
     var tname=$("#tablename").val();
     console.log(tname);
     if(tname==""){
    	 alert("表名不能为空！");
    	 return 0;
     }
     console.log("进来了");
     $.ajax({
             url: "http://localhost:8080/Createtables/ctable.action?username="+username,
             type:"post",
             data:JSON.stringify({tablename:tname,ziduans:ziduandata}),
             contentType:"application/json;charset=UTF-8",
             dataType:"json",
            
            
             

     });
     window.location="http://localhost:8080/Createtables/list.action";
}


</script>
</html>